import React from 'react';
import {getTopDetail} from '../../../services/cnode';
import {Loading} from '../../../components/Loading';
import { Icon } from 'antd';
import './style.css';

export class TopicDetail extends React.Component {
    constructor() {
        super();
        this.state = {
            detail: {},
            loading: false
        }
    }

    componentDidMount() {
        const { match } = this.props;
        const { params: { id } } = match;
        getTopDetail(id).then(data => {
            this.setState({detail: data, loading: true});
        });
    }

    renderReplies = () => {
        const { detail } = this.state;
        const { replies } = detail;
        if (replies && replies.length > 0) {
            return replies.map(one => <Reply reply={one} key={one.id}/>)
        }
    }

    render() {
        const { loading, detail } = this.state;
        const { content } = detail;
        if (!loading) {
            return <Loading/>
        }
        return <React.Fragment>
            <Title {...detail}/>
            <div dangerouslySetInnerHTML = {{__html:content}} ></div>
            <div className='panel'>
                <div className='header'>
                    <span className='col_fade'>23 回复</span>
                </div>
                {this.renderReplies()}
            </div>
        </React.Fragment>
        // return <div dangerouslySetInnerHTML = {{__html:content}} ></div>
    }
}

class Title extends React.Component {
    
    render() {
        const { title, author, visit_count } = this.props;
        return (
            <div id='content'>
                <div className='panel'>
                    <div className='header topic_header'>
                        <span className="topic_full_title">
                        <span className='put_top'>置顶</span>{title}</span>
                        <div className="changes">
                            <span>发布于 2 个月前</span>
                            <span>作者 <a href="/user/lellansin">{author && author.loginname}</a></span>
                            <span>{visit_count} 次浏览</span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

class Reply extends React.Component {
    render() {
        const { reply } = this.props;
        const { author } = reply;
        return(
        <div className='cell reply_area reply_item reply_highlight' reply_id={ reply && reply.id } reply_to_id={reply && reply.reply_id} id={reply && reply.id}>
            <div className='author_content'>
                <a href="/user/haishangfeng" className="user_avatar"><img alt="" src={author && author.avatar_url} title={author && author.loginname}/></a>
                <div className='user_info'>
                    <a className='dark reply_author' href="/user/haishangfeng">haishangfeng</a>
                    <a className="reply_time" href="#5c747a6fab86b86ddf6b2c15">1楼•2 个月前</a>
                </div>
                <div className='user_action'>
                    <span>
                        <Icon type="like" />
                        <span className="up-count"> 18 </span>
                    </span>
                    <span></span>
                </div>
            </div>
            <div className='reply_content from-haishangfeng' dangerouslySetInnerHTML = {{__html:reply && reply.content}} ></div>
            <div className='clearfix'></div>
        </div>)
    }
}
